<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header img{
            vertical-align: middle;//设置中间对齐
        }
        .el-header a{
            text-decoration: none;//去掉下划线
        }
        .el-table .el-table__cell {
            padding: 0 0;/*去掉自带的内边距*/
        }
        .el-main a{
            text-decoration: none;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #222;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-menu-item{
            font-size: 30px;
        }
        #i1 a:hover{
            color: red;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width:1200px;margin: 0 auto">
                <img src="imgs/logo.png" width="300">
                <el-input style="width:600px;position: relative;left: 50px" placeholder="请输入搜索美食或酒店">
                    <el-button style="background: #ffc300" slot="append" icon="el-icon-search">搜索</el-button>
                </el-input>
            </div>
            <div id="i1">
                <el-row gutter="20">
                    <el-col span="6" >
                        <el-menu style="width:1200px;font-size:20px;margin: 0 25px;padding-left: 30px"
                                 mode="horizontal" text-color="black">
                            <el-menu-item index="1">全部分类</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="18">
                        <el-menu style="width:1200px;font-size:20px;margin: 0 25px;"
                                     mode="horizontal" text-color="black">
                                <el-menu-item index="1"><a >首页</a></el-menu-item>
                                <el-menu-item index="2"><a href="">美食</a></el-menu-item>
                                <el-menu-item index="3"><a href="">酒店</a></el-menu-item>
                                <el-menu-item index="4"><a href="">我的订单</a></el-menu-item>
                                <el-menu-item index="5">
                                    <el-dropdown trigger="click" >
                              <span class="el-dropdown-link">
                                  <a>网络导航</a><i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item>
                                                <a style="text-decoration: none" href="">我的收藏</a></el-dropdown-item>
                                            <el-dropdown-item>
                                                <a style="text-decoration: none" href="">历史记录</a></el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </el-menu-item>
                            <el-menu-item index="6" style="position: relative;left: 10px">
                                <a href="login.html">
                                    <el-button style="background-color: #ffc300"round>立即登录</el-button>
                                </a>
                                <a href="register.html"><el-button round>请先注册</el-button></a>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>

        </el-header>
        <el-main style="width:1200px;height:400px;margin: 0 auto;">
            <el-container>
                <el-aside width="25px;height=150px">
                    <div>
                        <el-menu @select="handleSelect">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-flag"></i>
                                    <span style="color:red;font-size: 30px">美食</span>
                                </template>
                                <el-menu-item index="1-1"><a href="">甜品</a></el-menu-item>
                                <el-menu-item index="1-2"><a href="">饮品</a></el-menu-item>
                            </el-submenu>
                            <el-submenu index="2" >
                                <template slot="title">
                                    <i class="el-icon-picture"></i>
                                    <span style="color:red;font-size: 30px">酒店</span>
                                </template>
                                <el-menu-item index="2-1"><a href="">经济型</a></el-menu-item>
                                <el-menu-item index="2-2"><a href="">舒适型</a></el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main>
                    <div>
                        <el-row gutter="20">
                            <el-col span="18">
                                <el-carousel height="320px">
                                    <el-carousel-item v-for="url in bannerArr">
                                        <!--如果属性里面出现变量 必须使用属性绑定,也就是在属性名前面加:-->
                                        <img :src="url" width="100%" height="100%">
                                    </el-carousel-item>
                                </el-carousel>
                            </el-col>
                            <el-col span="6">
                                <el-card>
                                    <h3>
                                        <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
                                    </h3>
                                    <el-divider></el-divider>
                                    <el-table :data="topArr">
                                        <el-table-column type="index" label="排名"></el-table-column>
                                        <el-table-column prop="title" label="标题"></el-table-column>
                                        <el-table-column prop="salaCount" label="销量"></el-table-column>
                                    </el-table>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-main>
            </el-container>
        </el-main>
        <el-footer style="width:1300px;margin: 0 auto">
            <div style="display: block;height:40px;background-color: #0aa1ed;border-radius: 3px;
                 color: white;line-height: 40px;padding-left: 20px">
                <span style="font-size: 25px">猜你喜欢
                    <span style="font-size: 20px;">为你甄选最适合的</span>
                </span>
            </div>
            <div>
            <el-row gutter="20">
                <el-col span="6" v-for="p in productArr">
                    <el-card>
                        <img :src="p.url" width="100%" height="233">
                        <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                        <p style="font-size: 12px">
                            <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
                            <span style="float: right">销量：{{p.saleCount}}件</span>
                        </p>
                    </el-card>
                </el-col>
            </el-row>
            </div>
            <div style="background-image:url('imgs/wave.png');height: 90px"></div>
            <div style="background-color: #3f3f3f;text-align: center;color: #b1b1b1;padding: 30px 0">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                bannerArr:["imgs/b6.jpg","imgs/b5.jpg","imgs/b3.jpg"],
                topArr:[{title:"小米手机",salaCount:2313},
                    {title:"华为手机",salaCount:4000},
                    {title:"苹果手机",salaCount:5000},
                    {title:"联想电脑",salaCount:6000},
                    {title:"安踏跑鞋",salaCount:7000},
                    {title:"海信电视",salaCount:8000}],
                productArr:[{title:"记得过瘾辣炒牛蛙",price:233,oldPrice:598,url:"imgs/7.jpg",saleCount:2342},
                    {title:"超乎想象黑暗料理",price:233,oldPrice:598,url:"imgs/8.jpg",saleCount:2342},
                    {title:"辣味十足四川火锅",price:233,oldPrice:598,url:"imgs/9.jpg",saleCount:2342},
                    {title:"精品美味红烧肉",price:233,oldPrice:598,url:"imgs/10.jpg",saleCount:2342},
                    {title:"精品双人床",price:233,oldPrice:598,url:"imgs/1.jpg",saleCount:2342},
                    {title:"高端舒适标准间",price:233,oldPrice:598,url:"imgs/2.jpg",saleCount:2342},
                    {title:"经济适用标准间",price:233,oldPrice:598,url:"imgs/3.jpg",saleCount:2342},
                    {title:"舒适性双人间",price:233,oldPrice:598,url:"imgs/4.jpg",saleCount:2342},
                    {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
                    {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
                    {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
                    {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
            }
        },
        methods:{
            handleSelect(key,keyPath){
                if(key=="1-2"){
                    v.$message("添加分类");
                }else if(key=="2-2"){
                    //跳转到添加轮播图的页面
                    location.href="/insertBanner.html";
                }else{
                    v.currentIndex=key;
                }
            },
            handleChange(value){
                    console.log(value);
                }
        }
    })
</script>
</html>